<template>
  <div>
    <canvas></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  MeshBuilder,
  HemisphericLight,
  SceneLoader
} from '@babylonjs/core'
import '@babylonjs/loaders'
onMounted(() => {
  const canvas = document.querySelector('canvas')! as HTMLCanvasElement
  // 创建引擎
  const engine = new Engine(canvas, true)
  // 创建场景
  const scene = new Scene(engine)
  // 创建相机
  const Camera = new ArcRotateCamera('camera', 0, 0, 10, Vector3.Zero(), scene)
  // 运用相机和画布关联起来
  Camera.attachControl(canvas, true)
  // 添加灯光到场景中(环境灯)
  const light = new HemisphericLight('light', new Vector3(1, 1, 1), scene)
  // 创建球体
  // 第一个不传代表所以，第二个传相对路径，第三个传模型名称
  SceneLoader.ImportMeshAsync('', '../../public/', 'scene.babylon') //第
  // 渲染处理
  engine.runRenderLoop(() => {
    scene.render()
  })
  window.addEventListener('resize', function () {
    engine.resize()
  })
})
</script>

<style></style>
